<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>代码摘要生成系统v1.0</title>
</head>

<body style="background-color: #eef3ff;">

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"
    integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-zh_CN.min.js"></script>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css"
    integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css">


  <div id="app">

    <el-tabs :tab-position="tabPosition" v-model="activeName"
      style="height: 58px;padding-top: 18px; padding-left: 30px; background-color:white;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">

      <el-tab-pane label="用户管理" name="first">
        <!-- 1 -->
        <div class="card"
          style="margin-left: 6%;margin-right: 7%; margin-top:10px; height: 550px;border-radius: 10px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
          <h6 class="card-header" style="border: #eef3ff;">用户信息</h6>
          <div class="card-body">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="昵称">
                <el-input v-model="form.name" style="width: 50%;"></el-input>
              </el-form-item>

              <el-form-item label="用户名">
                <el-input v-model="form.username" style="width: 50%;"></el-input>
              </el-form-item>
              <el-form-item label="地址">
                <el-input v-model="form.address" style="width: 50%;"></el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="form.phone" style="width: 50%;"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remarks" style="width: 70%;"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary">修改</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="摘要生成" name="second">
        <!-- 1 -->
        <el-form :inline="true" :model="formInline2" class="demo-form-inline"
          style="margin-left: 80px; margin-top:10px; height:50px;">
          <el-form-item label="摘要最大长度">
            <el-input v-model="formInline2.max_len" placeholder="长度（整数值）"></el-input>
          </el-form-item>
          <el-form-item label="语言">
            <el-select v-model="formInline2.lang" placeholder="语言">
              <el-option label="java" value="java"></el-option>
              <el-option label="python" value="python"></el-option>
              <el-option label="go" value="go"></el-option>
              <el-option label="javascript" value="javascript"></el-option>
              <el-option label="ruby" value="ruby"></el-option>
              <el-option label="php" value="php"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitText">生成摘要</el-button>
          </el-form-item>
        </el-form>

        <div class="card"
          style="margin-left: 6%;margin-right: 7%; margin-top:20px; height: 350px;border-radius: 25px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
          <h6 class="card-header" style="background-color:#f5f6fb; border: #eef3ff;">输入代码段</h6>
          <div class="card-body">
            <el-input type="textarea" :rows="11" placeholder="请输入代码" v-model="formInline2.textarea1">
            </el-input>
          </div>
        </div>

        <div class="card"
          style="margin-left: 6%;margin-right: 7%; margin-top:20px; height: 160px; border-radius: 10px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
          <h6 class="card-header" style="border: #eef3ff;">摘要</h6>
          <div class="card-body">
            <el-input type="textarea" :rows="2" placeholder="摘要生成结果" v-model="textarea2">
            </el-input>
          </div>
        </div>


      </el-tab-pane>

      <el-tab-pane label="上传文件" name="third">
        <!-- 2 -->
        <div class="card"
          style="margin-left: 6%;margin-right: 7%; margin-top:20px; height: 250px;border-radius: 10px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
          <h6 class="card-header" style="border: #eef3ff;">文件上传</h6>
          <div class="card-body">
            <el-upload class="upload-demo" action="upload" :on-preview="handlePreview" :on-remove="handleRemove"
              :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList"
              align="center">
              <el-button size="large" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">推荐格式：json</div>
            </el-upload>
          </div>
        </div>

        <div class="card"
          style="margin-left: 6%;margin-right: 7%; margin-top:30px; height: 150px;border-radius: 10px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
          <h6 class="card-header" style="border: #eef3ff;">参数配置</h6>
          <div class="card-body">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="最大摘要长度">
                <el-input v-model="formInline.max_len" placeholder="长度（整数值）"></el-input>
              </el-form-item>
              <el-form-item label="语言">
                <el-select v-model="formInline.lang" placeholder="语言">
                  <el-option label="java" value="java"></el-option>
                  <el-option label="python" value="python"></el-option>
                  <el-option label="go" value="go"></el-option>
                  <el-option label="javascript" value="javascript"></el-option>
                  <el-option label="ruby" value="ruby"></el-option>
                  <el-option label="php" value="php"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item>
              
            </el-form-item> -->
            </el-form>

          </div>
        </div>
        <div align="center" style="margin-top: 20px;">
          <el-button type="primary" @click="onSubmit">生成摘要！</el-button>
        </div>

      </el-tab-pane>

      <el-tab-pane label="摘要生成结果" name="fourth">
        <!-- 4 -->

        <el-table v-loading="loading" :data="tableData" style="margin-left: 20px; margin-top:20px;border-radius: 10px;"
          height="550px">
          <el-table-column fixed prop="id" label="id" width="150">
          </el-table-column>
          <el-table-column prop="code" label="代码" width="450">
          </el-table-column>
          <el-table-column prop="result" label="摘要" width="450">
          </el-table-column>
        </el-table>
        <el-button type="primary" style="margin-left: 30px; margin-top: 15px" @click="download">下载结果</el-button>
      </el-tab-pane>
    </el-tabs>



  </div>




</body>




<script>

  var app = new Vue({
    el: "#app",
    data() {
      return {
        tabPosition: 'top',
        fileList: [],
        formInline: {
          max_len: '32',
          lang: 'java'
        },
        formInline2: {
          max_len: '32',
          lang: 'python',
          textarea1: ''
        },
        textarea2: '',
        tableData: Array(20),
        form: {
          name: '史莱姆上校',
          username: 'user_202204080052',
          address: '泰拉大陆',
          phone: '12357623451',
          remarks: '快乐史莱姆',
        },
        activeName: "second",
        loading: false,

      };
    },
    methods: {
      handleRemove(file, fileList) {
        axios.post('/remove')
          .then((response) => {
            this.$message.success('删除成功！');
            console.log(response)
          })
          .catch((error) => {
            this.$message.error("Error!")
            console.log(error)
          })
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      onSubmit() {
        console.log('submit!');
        this.$message.success('提交成功，正在处理！');
        this.activeName = "fourth";
        this.loading = true;
        axios.post('/submit', this.formInline)
          .then((response) => {
            this.tableData = response.data;
            this.$message.success('处理成功！');
            this.loading = false;
            console.log(response)
          })
          .catch((error) => {
            this.loading = false;
            this.$message.error("Error!")
            console.log(error)
          })
      },
      onSubmitText() {
        console.log('submit!');
        axios.post('/submitText', this.formInline2)
          .then((response) => {
            this.textarea2 = response.data
            console.log(response)
          })
          .catch((error) => {
            console.log(error)
          })
      },
      download() {
        axios.post('/download', "")
          .then((response) => {

            var blob = new Blob([response.data])
            var downloadElement = document.createElement('a');
            var href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = 'result.json'; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象 

            console.log(response);
          })
          .catch((error) => {
            this.$message.error("Error!")
            console.log(error)
          })
      }
    }
  })


</script>


<style>

</style>